<template>
  <div style="min-width: 809px">
    <div v-if="$route.path == '/referralList'">
      <div class="vs-search-box" style="padding: 24px 22px">
        <el-form ref="form" :inline="true" v-search-box-enter :model="paging" label-width="80px">
          <el-form-item label="母卡门店:">
            <el-select v-model="paging.store_id" filterable placeholder="请选择" style="width: 200px" clearable>
              <el-option v-for="item in storeList" :key="item.id" :label="item.title" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="母卡姓名:">
            <el-input v-model="paging.referrer" placeholder="请输入母卡姓名" clearable>
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="子卡姓名:">
            <el-input v-model="paging.keys" placeholder="请输入子卡姓名" clearable>
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </el-form-item>
          <el-form-item class="">
            <el-button @click="reset">重置</el-button>
            <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="vs-table-box">
        <el-table :data="tableData" v-loading="loading" style="width: 100%" header-row-class-name="has-gutter-table" border>
          <el-table-column type="index" label="序号" align="center" width="70"> </el-table-column>
          <el-table-column prop="parent.store.title" label="母卡门店" align="center"> </el-table-column>
          <el-table-column prop="parent.vip_no" label="母卡卡号" align="center"> </el-table-column>
          <el-table-column prop="parent.realname" label="母卡姓名" align="center"> </el-table-column>
          <el-table-column prop="store.title" label="子卡店铺" align="center"> </el-table-column>
          <el-table-column prop="vip_no" label="子卡卡号" align="center"> </el-table-column>
          <el-table-column prop="realname" label="子卡姓名" align="center"> </el-table-column>
          <el-table-column prop="phone" label="手机号码" width="110" align="center"> </el-table-column>
          <el-table-column prop="last_time" label="最后消费时间" width="160" align="center"> </el-table-column>
          <el-table-column prop="vip_time" label="开卡时间" width="110" align="center">
            <template slot-scope="{ row }" v-if="row.vip_time">
              {{ $moment(row.vip_time * 1000).format('YYYY-MM-DD') }}
            </template>
          </el-table-column>
        </el-table>
        <div class="vs-paging-box">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="paging.page" :page-size="paging.limit" :page-sizes="[100, 200, 500, 1000]" layout="total, sizes, prev, pager, next, jumper" :total="paging.total"> </el-pagination>
        </div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        paging: {
          referrer: '',
          store_id: '',
          keys: '',
          page: 1,
          total: 0,
          limit: 100,
        },
        tableData: [],
        storeList: [],
      };
    },
    created() {
      if (this.$route.path == '/referralList') {
        this.getStore();
        this.repairGetList();
      }
    },
    filters: {
      genderText(val) {
        switch (val) {
          case 0:
            val = '未知';
            break;
          case 1:
            val = '男';
            break;
          case 2:
            val = '女';
            break;
        }
        return val;
      },
    },
    methods: {
      // 获取所有门店
      async getStore() {
        let { code, data } = await this.$Http.getStore({ is_all: 1 });
        if (code) {
          this.storeList = data;
        }
      },
      async repairGetList() {
        this.loading = true;
        let obj = Object.assign({}, this.paging);
        let { code, data } = await this.$Http.getIntroduction(obj);
        this.loading = false;
        if (code) {
          this.tableData = data.data;
          this.paging.total = data.total;
        }
      },
      reset() {
        //重置
        this.paging = this.$options.data().paging;
        this.handleCurrentChange(1);
      },
      handleSizeChange(val) {
        this.paging.limit = val;
        this.repairGetList();
      },
      handleCurrentChange(val) {
        this.paging.page = val;
        this.repairGetList();
      },
    },
  };
</script>

<style lang="scss" scoped>
  .image-thumbnail {
    width: 130px;
    height: 130px;
  }

  .vs-search-box {
    display: flex;
  }

  .btn_info {
    cursor: pointer;
    color: #409eff;
  }
</style>
